<template>
    <el-card>
        <template #header>
            <div class="card-header">
                <span>任务分配</span>
            </div>
        </template>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="appointmentId" label="预约ID" />
            <el-table-column prop="user.realName" label="客户姓名" />
            <el-table-column prop="department.departmentName" label="预约分类" />
            <el-table-column prop="problem" label="问题描述" />
            <el-table-column prop="type.typeName" label="服务类型" />
            <el-table-column prop="appointmentStatus" label="预约状态">
                <template #default="scope">
                    <el-tag v-if="scope.row.appointmentStatus === 0" type="primary">已预约</el-tag>
                    <el-tag v-if="scope.row.appointmentStatus === 2" type="success">服务中</el-tag>
                    <el-tag v-if="scope.row.appointmentStatus === 1" type="danger">已取消</el-tag>
                    <el-tag v-if="scope.row.appointmentStatus === 3" type="danger">已完成</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="服务员工">
                <template #default="scope">
                    <span v-if="scope.row.appointmentStatus != 1">
                        <el-button v-if="scope.row.emp === null" size="small"
                            @click="showAddEmp(scope.row.appointmentId)">分配员工</el-button>
                        <span v-else>{{ scope.row.emp.realName }}</span>
                    </span>
                </template>
            </el-table-column>
            <el-table-column label="服务进度">
                <template #default="scope">
                    <el-progress :text-inside="true" :stroke-width="26" :percentage="scope.row.speed * 10" />
                </template>
            </el-table-column>
            <!-- <el-table-column label="操作">
                <template #default="scope">
                    <el-button size="small">编辑</el-button>
                    <el-popconfirm title="你确定要删除该业务吗？" confirm-button-text="确认" cancel-button-text="取消" @confirm="">
                        <template #reference>
                            <el-button v-show="scope.row.appointmentStatus != 1" size="small"
                                type="danger">移除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column> -->
        </el-table>
        <template #footer>
            <el-row class="row-bg" justify="space-evenly">
                <el-col :span="6">
                    <el-pagination layout="prev, pager, next" :total="pageInfo.total" :page-size="pageInfo.pageSize"
                        @current-change="getAll" />
                </el-col>
            </el-row>
        </template>
    </el-card>

    <!-- START 分配员工 -->
    <el-dialog v-model="addEmpVisible" title="分配员工" width="500" center>
        <el-form :model="orderInfo">
            <el-form-item label="员工选择" >
                <el-select v-model="orderInfo.empId" placeholder="请选择完成该任务的员工">
                    <el-option v-for="item in empList" :key="item.userId" :label="item.realName" :value="item.userId" />
                </el-select>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="addEmpVisible = false">取消</el-button>
                <el-button type="primary" @click="subUpdate">
                    确认
                </el-button>
            </div>
        </template>
    </el-dialog>
    <!-- END 分配员工 -->
</template>

<script setup>
import orderApi from "@/api/orderApi";
import userApi from "@/api/userApi";
import { ElMessage } from "element-plus";
import { ref, reactive } from "vue"

const tableData = ref([]);
const pageInfo = ref({});
// 分配员工弹出层
const addEmpVisible = ref(false);
// 单条订单信息
const orderInfo = ref({});
// 部门员工列表
const empList = ref([]);


// 通过id获取订单信息
const getAppointmentInfo = async (id) => {
    let resp = await orderApi.getColumnById(id);
    if (resp.code === 10000) {
        console.log(resp.data)
        orderInfo.value = resp.data;
    } else {
        ElMessage.error(resp.msg);
    }
}
// 获得该部门员工信息
const getEmpList = async () => {
    let resp = await userApi.getEmpList();
    if (resp.code === 10000) {
        empList.value = resp.data;
    } else {
        ElMessage.error(resp.msg);
    }
}

// 获取表格数据信息
const getTableData = (page) => {
    let departmentId = sessionStorage.getItem('userDepartmentID');
    orderApi.getAll(page, null, null, null, departmentId).then(
        resp => {
            if (resp.code === 10000) {
                pageInfo.value = resp.data;
                tableData.value = resp.data.list;
            }
        }
    );
}

// 显示分配员工信息
const showAddEmp = (id) => {
    getAppointmentInfo(id);
    getEmpList();
    addEmpVisible.value = true;
}

// 更新员工信息
const subUpdate = () => {
    orderApi.updateInfo(orderInfo.value)
        .then(resp => {
            if (resp.code === 10000) {
                getTableData(pageInfo.value.pageNum);
                addEmpVisible.value = false;
            } else {
                ElMessage.error(resp.msg);
            }
        });
}

getTableData(1)
</script>

<style lang="scss" scoped></style>
